<!--
 * @Author: wangming
 * @Date: 2021-04-09 17:22:59
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-05 17:19:44
 * @Description: file content
-->
<template>
  <div>
    <el-form-item label="标题" prop="title">
      <GlobalizationConfigWord
        class="mr10"
        @setLangCode="(title_i18n) => $set(value, 'title_i18n', title_i18n)"
        :localism="value.title_i18n"
      ></GlobalizationConfigWord>
      <el-input v-model="value.title" size="small"></el-input>
    </el-form-item>
    <el-form-item label="固定列宽" class="tr">
      <el-input-number
        size="small"
        style="width: 100%"
        v-model="value.width"
        controls-position="right"
        :min="1"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="隐藏列" class="tr">
      <el-switch
        v-model="value.hide"
        :active-value="true"
        :inactive-value="false"
      />
    </el-form-item>
    <el-form-item label="自定义渲染" class="tr">
      <el-switch v-model="value.isRender" />
    </el-form-item>
    <el-button
      @click="editJsx"
      type="primary"
      icon="el-icon-edit"
      plain
      size="mini"
      v-if="value.isRender"
      >代码编辑</el-button
    >
  </div>
</template>

<script>
import basicmixins from "../basicmixins";
import monacoEditor from "./monacoEditor/index.js";
const template = `/**
 *
 * @param {*} h 系统预留字段
 * @param {*} param1  {
 * row：点击列数据,
 * index:索引,
 * seqIndex:序号,
 * context:页面工具类对象,
 * operater:Function 表格默认操作事件
 * }
 * 例:operater(type,query)  调用以后触发表单内置事件 type:操作类型 ，query：页面跳转时候用到的自定义参数
 * 例:type枚举  'delete' 删除  'edit'  跳转表单页面  'processEdit' 流程配置  'processInfo' 流程查看
 * @param {*} rootScope  页面公共事件对象
 * @returns
 */
function render(h, { row, index,seqIndex,context },rootScope) {
  return <div>{index}</div>
}`;
export default {
  mixins: [basicmixins],
  methods: {
    editJsx() {
      let jsx = this.value.renderJsx || template;
      monacoEditor.showEdit(decodeURIComponent(jsx)).then((res) => {
        this.value.renderJsx = encodeURIComponent(res);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 8px;
}
</style>
